<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>成都缘友社交网站</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link href="css/common.css" rel="stylesheet">
	<link href="css/index.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<header>
	<nav class="navbar head-default" role="navigation">
	  <div class="container">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
	        <span class="sr-only">Toggle navigation</span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	        <span class="icon-bar"></span>
	      </button>
	      <a class="navbar-brand disabled" href="#">成都缘友网</a>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav" id="navBar">
	        <li class="active" id="nav-index"><a href="index.html">首页</a></li>
	        <li id="nav-friends"><a href="friends.html">我的交友</a></li>
	        <li id="nav-people"><a href="people.html">附近的人</a></li>
	        <li id="nav-photos"><a href="photos.html">照片墙</a></li>
	      </ul>
	      <ul class="nav navbar-nav navbar-right">
	          <li><a href="login.html">登录</a></li>
	          <li><a href="sign.html">注册</a></li>
	      </ul>
	    </div><!-- /.navbar-collapse -->
	  </div><!-- /container -->
	</nav><!--导航结束-->
	<div class="banner-box container hidden-xs">
		<!-- <div class="container"> -->
			<div class="row">
				<div class="friends-search col-lg-8 col-md-12 col-sm-12">
				<ul>
			    	<li>我要找：
			    		<p class="s_list" id="sex-sec-p"><span>女朋友</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="sex-p" >
							<ol class="list-group">
								<li><a name="sexsec" value="2">女朋友</a></li>
								<li><a name="sexsec" value="1">男朋友</a></li>
							</ol>
						</div>
			    	</li>
			    	<li>年龄：
			    		<p class="s_list" id="age-start-p"><span>18岁</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="age-start">
							<div class="se_nl" id="mainBox">
								<ol class="list-group">
    		                    </ol>
			                </div>
			            </div>
			    	</li>
			    
			    	<li class="nl">
			    		—
			    		<p class="s_list" id="age-end-p"><span>28岁</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="age-end">
							<div class="se_nl" id="mainBox">
								<ol class="list-group">
				                </ol>
			                </div>
			            </div>
			    	</li>
			    	<li>区域：
			    		<p class="s_list" id="s-sec-area"><span>武侯区</span><em class="glyphicon glyphicon-menu-down"></em></p>
						<div class="se_ce hidden" id="sec-area" >
							<ol class="list-group">
								<li><a name="sexsec" value="2">武侯区</a></li>
								<li><a name="sexsec" value="1">青羊区</a></li>
							</ol>
						</div>
			    	</li>
			    	<li><a class="s_button" href="javascript:void(0)">快速搜索</a></li>
			    </ul>
				</div>
				<div class="col-lg-4 hidden-sm hidden-md">
					<div class="maqBox">
						<i class="glyphicon glyphicon-volume-up"></i>
					    <ul class="list-group">
					        <li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a></li>
					        <li><a href="#">2.tab页面切换效果（案例）</a></li>
					        <li><a href="#">3.圆角水晶按钮制作（案例）</a></li>
					    </ul>
					</div>
				</div>
			</div>
	</div><!-- 通栏 -->
</header>
<main>
	<div class="container">
		<div class="row">
			<div class="col-lg-8 col-md-8 pull-right">
				<!-- 广告轮播 -->
				<div id="ad-carousel" class="carousel slide" data-ride="carousel">
				    <ol class="carousel-indicators">
				        <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
				        <li data-target="#ad-carousel" data-slide-to="1"></li>
				        <li data-target="#ad-carousel" data-slide-to="2"></li>
				        <li data-target="#ad-carousel" data-slide-to="3"></li>
				    </ol>
				    <div class="carousel-inner">
				        <div class="item active">
				            <img src="images/5.jpg" alt="1 slide">
				        </div>
				        <div class="item">
				            <img src="images/3.jpg" alt="2 slide">
				        </div>
				        <div class="item">
				            <img src="images/4.jpg" alt="3 slide">
				        </div>
				        <div class="item">
				            <img src="images/2.jpg" alt="4 slide">
				        </div>
				    </div>
				    <a class="left carousel-control" href="#ad-carousel" data-slide="prev"><span
				            class="glyphicon glyphicon-chevron-left"></span></a>
				    <a class="right carousel-control" href="#ad-carousel" data-slide="next"><span
				            class="glyphicon glyphicon-chevron-right"></span></a>
				</div><!--轮播结束-->
				<div class="frame recommended">
					<h4>才子佳人</h4>
					<ul class="media-list">
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
					  <li class="media">
						  <div class="media-left">
						    <a href="friendsCenter.html">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<ul class="list-group">
								<li><strong>彭和平</strong></li>
								<li>28岁</li>
							</ul>
							<button class="btn care" type="button">关注</button>						  
						  </div>
					  </li>
				</ul>
				</div><!--才子佳人结束-->
				<div class="warning">
					<i class="glyphicon glyphicon-alert"></i>
					<ul class="list-group">
						<li><span>1</span>不要轻易与他人发生任何形式的金钱往来</li>
						<li><span>2</span>初次约会安排在双方都熟悉的公共场所，不要去陌生地点</li>
						<li><span>3</span>不要轻易透露个人信息，如手机，qq号，住址等</li>
					</ul>
				</div>
			</div><!--col-lg-8结束-->
			<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pull-left">
				<div class="self-info">
					<form>
					   <p class="text-center">立即登录，寻找你的缘分</p>
					  <div class="form-group">
					  	<em class="glyphicon glyphicon-user"></em>
					    <input type="text" class="form-control" id="userName" name="userName" placeholder="用户名">
					  </div>
					  <div class="form-group">
					  	<em class="glyphicon glyphicon-lock"></em>
					    <input type="password" class="form-control" id="password" placeholder="密码">
					  </div>
					  <div class="checkbox">
					    <label>
					      <input type="checkbox">下次自动登录
					    </label>
					      <a class="pull-right" href="">忘记密码</a>
					  </div>
					  <div class="btns" role="group">
						  <button type="button" class="btn pull-left">登录</button>
						  <p class="pull-right">没有账号，前去<a href="sign.html">注册</a></p>
					  </div>
					</form><!--登录表单-->
					<div class="infos" style="display:none">
						<div class="media">
						  <div class="media-left">
						    <a href="#">
						      <img class="media-object" src="./images/Penguins.jpg" alt="头像">
						    </a>
						  </div>
						  <div class="media-body">
							<h4 class="media-heading">彭和平</h4>
							<ul class="list-group">
								<li><span>年龄:</span>28</li>
								<li><span>性别:</span>女</li>
								<li><span>身高:</span>177</li>
								<li><span>体重:</span>148</li>
							</ul>						  
						</div>
						</div><!--个人详细信息-->
						<ul class="list-group self-func">
							<li><i class="glyphicon glyphicon-envelope"></i><a href="#">私信<span class="badge">42</span></a></li>
							<li><i class="glyphicon glyphicon-heart-empty"></i><a href="#">约会<span class="badge">42</span></a></li>
							<li><i class="glyphicon glyphicon glyphicon-user"></i><a href="#">访客<span class="badge">42</span></a></li>
							<li><i class="glyphicon glyphicon-eye-open"></i><a href="#">关注<span class="badge">42</span></a></li>
						</ul>
						<button type="button" class="btn btn-default">我附近的人</button>		
					</div>
				</div><!--左侧分栏上侧-->
				<div class="frame application">
					<h4>热门应用</h4>
					<ul class="media-list">
					  <li class="media">
					    <div class="media-left">
					      <a href="#">
					        <img class="media-object" src="./images/xh.png" alt="...">
					      </a>
					    </div>
					    <div class="media-body">
					      <a href="" class="media-heading">邂逅</a>
					      茫茫人海，相遇即是缘分来邂逅，寻找我的有缘人
					    </div>
					  </li>
					  <li class="media">
					    <div class="media-left">
					      <a href="#">
					        <img class="media-object" src="./images/zp.png" alt="...">
					      </a>
					    </div>
					    <div class="media-body">
					      <a href="#" class="media-heading">照片墙</a>
					      帅哥美女集中营，美丽就是要秀出来
					    </div>
					  </li>
					</ul>
				</div><!--左侧分栏下侧-->
			</div><!--col-lg-4结束-->
		</div><!--row结束-->
	</div><!--container结束-->
</main>
<footer>
	<div class="container">
		
    <p class="jy_link">
		<a href="http://jiaoyou.58.com/bj/">北京交友网</a>
        <a href="http://jiaoyou.58.com/sh/">上海交友网</a>
        <a href="http://jiaoyou.58.com/tj/">天津交友网</a>
        <a href="http://jiaoyou.58.com/gz/">广州交友网</a>
        <a href="http://jiaoyou.58.com/zz/">郑州交友网</a>
        <a href="http://jiaoyou.58.com/xa/">西安交友网</a>
        <a href="http://jiaoyou.58.com/sz/">深圳交友网</a>
        <a href="http://jiaoyou.58.com/su/">苏州交友网</a>
        <a href="http://jiaoyou.58.com/cq/">重庆交友网</a>
        <a href="http://jiaoyou.58.com/wh/">武汉交友网</a>
        <a href="http://jiaoyou.58.com/nj/">南京交友网</a>
        <a href="http://jiaoyou.58.com/hz/">杭州交友网</a>
        <a href="http://jiaoyou.58.com/cd/">成都交友网</a>
        <a href="http://jiaoyou.58.com/hrb/">哈尔滨交友网</a>	
        <a href="http://jiaoyou.58.com/cc/">长春交友网</a>
        <a href="http://jiaoyou.58.com/sjz/">石家庄交友网</a>	
        <a href="http://jiaoyou.58.com/jn/">济南交友网</a>
        <a href="http://jiaoyou.58.com/ty/">太原交友网</a>
        <a href="http://jiaoyou.58.com/fz/">福州交友网</a>
        <a href="http://jiaoyou.58.com/nc/">南昌交友网</a>
        <a href="http://jiaoyou.58.com/city/">更多交友网</a>
	</p>
	<p>Copyright (C) 2017 All Rights Reserved. 项目六组 版权所有</p>
	</div>
</footer>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/common.js"></script>
<script src="js/index.js"></script>
</body>
</html>